$(function () {
    // 设置一个全局变量，将来筛选和分页都可以使用这个值！
    let q = {
        pagenum: 1,	    // 是	int	页码值
        pagesize: 2,	// 是	int	每页显示多少条数据
        cate_id: "",	// 否	string	文章分类的 Id
        state: "",  	// 否	string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1: 初始化文章列表;
    initArticleList();
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 渲染
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${dateFormat(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                            <button class="layui-btn layui-btn-xs">修改</button>
                        </td>
                    </tr>
                `);
            });
            // 赋值
            $("tbody").empty().html(arr.join(''));
            // 初始化文章列表之后，进行分页处理;
            // 页面加载后，和筛选后都要调用这个方法;
            renderPage(res.data.total);
        });
    }

    // 需求2: 初始化文章分类列表
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 初始化
            let arr = ['<option value="">请选择文章类别</option>'];
            res.data.data.forEach(ele => {
                arr.push(`<option value="${ele.Id}">${ele.name}</option>`);
            });
            // 循环完毕后，在渲染
            $("[name=cate_id]").empty().html(arr.join(''));
            form.render();
        });
    }

    // 需求3: 筛选
    $("#searchForm").on('submit', function (e) {
        e.preventDefault();
        // 修改 q 对象中的值
        q.cate_id = $('[name=cate_id]').val();
        q.state = $('[name=state]').val();
        // 然后重新渲染文章列表！
        initArticleList();
    })
    
    // 需求4: 分页
    function renderPage(total) {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, // 每页显示条数
            curr: q.pagenum, // 显示当前页
            // 自定义排版
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            // 自定义每页显示多少条
            limits: [2,5,10,15,20],
            // 分页切换是触发, 每页显示条数切换也会触发
            jump: function (obj, first) {
                // obj 所有切换后的信息
                // // first 是否首次，一般用于初始加载的判断
                if (first == undefined) { // 说明不是首次，是切换页码的时候触发的
                    // 改变页码，后重新渲染
                    q.pagenum = obj.curr;
                    // 改变条数，后重新渲染
                    q.pagesize = obj.limit;
                    initArticleList();
                }

            }
        });
    }
});